<template>
	<view class="wrap">
		<view class="back" @tap="back">
			<image :src="$imgUrl('/lt_back.png')" mode="scaleToFill" />
		</view>
		<view class="content">
				<u--form
					labelPosition="left"
					:model="model1"
					ref="form1"
					labelWidth="140rpx"
				>
				<u-form-item
						label="微信号："
						prop="userInfo.name"
						ref="item1"
					>
				
						<u--input
							v-model="model1.userInfo.name"
							border="none"
							placeholder="请输入微信号"
						></u--input>
					</u-form-item>
					<u-form-item
						label="AR名片展示信息设置："
						prop="userInfo.intro"
						ref="item2"
					>
						<u--textarea placeholder="请输入" v-model="model1.userInfo.intro"></u--textarea>
				
					</u-form-item>
					<u-form-item label="AR名片:" prop="userInfo.switchValue" ref="item3">
						<u-switch v-model="model1.userInfo.switchValue" asyncChange @change="asyncChange" active-color="#054936" size="55"></u-switch>
					</u-form-item>
				
				</u--form>
				<u-button
					type="primary"
					text="保存"
					customStyle="margin-top: 50px"
					@click="submit"
					color="linear-gradient(to right, rgb(0, 150, 136), rgb(139, 195, 74))"
				></u-button>
			
		</view>
		
	</view>

</template>
<script>
export default {
	data() {
		return {
				disabled1: false,
				tips: '',
				value: '',
				model1: {
					userInfo: {
						name: '',
						intro: '',
						switchValue: ''
					},
				},
				
				
				rules: {
					'userInfo.name': [{
						type: 'string',
						required: true,
						message: '请输入微信绑定得手机号或微信号',
						trigger: ['blur', 'change']
					}],
					'userInfo.intro': {
						type: 'string',
						min: 3,
						required: true,
						message: '请输入名片展示信息',
						trigger: ['change']
					}
				}
			
			}

		
	},
	onReady() {
			this.$refs.form1.setRules(this.rules)
		},
	methods: {
		back(){
			uni.navigateBack()
		},
	submit() {
		this.$refs.form1.validate().then(res => {
			uni.$u.toast('校验通过')
		}).catch(errors => {
			uni.$u.toast('校验失败')
		})
	},
		asyncChange(e) {
			uni.showModal({
				content: e ? '确定要打开吗' : '关闭AR名片同时将清除本人人脸信息,确定关闭吗?',
				success: (res) => {
					if (res.confirm) {
						this.switchValue = e;
					}
				}
			});
		},
		
	},
	mounted() {}
};
</script>


<style scoped lang="scss">
.wrap{
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    display: flex;
    background-image: url($imgUrl + "/lt_bg.jpg") ;
    background-repeat: no-repeat;
    flex-direction: column;
    .back{
     width: 95%;
     margin: 0 auto;
     padding-top:calc(var(--status-bar-height) + 60rpx) ;
      height: 120rpx;
      image{
       width: 76rpx;
       height: 64rpx;
      }
    }
    .content{
     width: 88%;
     margin: 20rpx auto;
	 /deep/.u-input__content__field-wrapper__field{
		background: #fff;
	 }
	 /deep/ .u-form-item__body__left__content__label{
		color: #fff !important;
		}
    }
	/deep/ .u-form-item:nth-child(2) {
		.u-form-item__body__left{
			width: 100% !important;
			height: 70rpx;
		}
			.u-form-item__body{
				flex-direction: column !important;
			}
	}
	/deep/ .u-input__content__field-wrapper__field{
			text-align: left;
			color: #303133;
			height: 70rpx;
			font-size: 15px;
			flex: 1;
			line-height: 70rpx;
			padding-left: 10rpx;
			display: flex;
			align-items: center;
			.input-placeholder{
				width: 100% !important;
			}
	}
   }

</style>
